<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="cu-form-group">
			<view class="title">选择银行</view>
			<picker @change="bankChange" :value="index" :range="bankList" range-key="bankName">
				<view class="picker">
					<view class="flex justify-end align-center" v-if="index > -1">
						<image :src="`/static/images/bank/${bankList[index].bankCode}.png`"></image>
						<view class="margin-left-xs">{{bankList[index].bankName}}</view>
					</view>
					<view v-else>
						请选择
					</view>
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">银行账号</view>
			<input type="text" placeholder="填写银行卡 / 支付宝微信账号" v-model="bankData.cardCode"/>
		</view>
		<view class="cu-form-group" v-if="bankData.bankCode != 'ALIPAY' && bankData.bankCode != 'WECHAT'">
			<view class="title">开户支行</view>
			<input type="text" maxlength="30" placeholder="办理帐户的银行" v-model="bankData.cardAddress"/>
		</view>
		<view class="cu-form-group">
			<view class="title">持卡姓名</view>
			<input type="text" maxlength="4" placeholder="持账户人姓名" v-model="bankData.username"/>
		</view>
		<view class="cu-form-group">
			<view class="title">手机号码</view>
			<input type="number" maxlength="11" placeholder="持账户人手机号" v-model="bankData.mobile"/>
		</view>
		<view class="padding-bj flex flex-direction margin-top">
			<button @tap="confirm" class="cu-btn wanl-bg-orange lg">完成</button>
		</view>
		
		
		<view class="popup-mask" v-show="popupVisible" @click="hidePopup"></view>
		<view class="popup-wrapper" v-show="popupVisible">
		  <view class="popup-container">
			<view class="popup-header">
			  <view class="popup-title">隐私政策</view>
			</view>
			<view class="popup-body">
			  <view>您好，本功能会收集你的个人信息如(支付宝、微信、银行帐户及姓名、手机号)，本应用会按照隐私政策的规定使用和披露您的个人信息。可阅读 
			    <text style="color: #378CFF;border-bottom: 1px solid #378CFF;" @tap="onDetails(10, '用户协议和隐私政策')">用户协议和隐私政策</text>。
			  </view>
			</view>
			<view class="popup-footer">
			  <button class="cu-btn round xg" @click="showPopup">同 意</button>			 
			</view>
			<view class="popup-footer">
			  <button class="cu-btn round xg" @click="hidePopup">不同意</button>	 
			</view>
			 
		  </view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankData: {
					username: '',
					mobile: '',
					bankCode: '',					
					bankName: '',
					cardCode: '',
					cardAddress:''
				},
				index: -1,
				bankList: [
					{bankCode: 'ALIPAY', bankName: '支付宝账户'},
					{bankCode: 'WECHAT', bankName: '微信账户'},
					{bankCode: 'ICBC', bankName: '工商银行'},
					{bankCode: 'ABC', bankName: '农业银行'},
					{bankCode: 'PSBC', bankName: '邮储银行'},
					{bankCode: 'CCB', bankName: '建设银行'},
					{bankCode: 'CMB', bankName: '招商银行'},
					{bankCode: 'BOC', bankName: '中国银行'},
					{bankCode: 'COMM', bankName: '交通银行'},
					{bankCode: 'SPDB', bankName: '浦发银行'},
					{bankCode: 'GDB', bankName: '广发银行'},
					{bankCode: 'CMBC', bankName: '民生银行'},
					{bankCode: 'PAB', bankName: '平安银行'},
					{bankCode: 'CEB', bankName: '光大银行'},
					{bankCode: 'CIB', bankName: '兴业银行'},
					{bankCode: 'CITIC', bankName: '中信银行'}
				],
				popupVisible: false
			}
		},
		methods: {
			// 后续版本添加第三方API接口，自动获取银行，验证银行卡三要素
			confirm(){
				let data = this.bankData;
				if(!data.bankCode){
					this.$wanlshop.msg('请选择银行卡');
					return;
				}
				if(!data.cardCode){
					this.$wanlshop.msg('请选择账号');
					return;
				}
				if(!data.cardAddress && bankData.bankCode != 'ALIPAY' && bankData.bankCode != 'WECHAT'){
					this.$wanlshop.msg('请选择开户支行');
					return;
				}
				if(!data.username){
					this.$wanlshop.msg('请填写真实姓名');
					return;
				}
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(!data.mobile || !myreg.test(data.mobile)){
					this.$wanlshop.msg('请填写正确手机号');
					return;
				}
				this.$wanlshop.prePage().refreshList(data);
				this.$wanlshop.back(1);
			},
			bankChange(e) {
				this.index = e.detail.value;
				this.bankData.bankCode = this.bankList[e.detail.value].bankCode;
				this.bankData.bankName = this.bankList[e.detail.value].bankName;
			},
			showPopup() {
				  
			      this.popupVisible = false;				  
			},
			
			hidePopup() {
			  this.popupVisible = false;
			  
			  // #ifdef APP-PLUS
			  if (uni.getSystemInfoSync().platform === 'android') {
			    plus.runtime.quit();
			  } else {
			    // iOS设备上通常无法完全退出应用，只能退到后台
			    plus.runtime.quit();
			    plus.ios.invoke('UIApplication', 'sharedApplication').invoke('exit');
			  }
			  // #endif
			  // 返回页面
			  uni.reLaunch({url: '/pages/user2/bank/bank'});
			  
			}
		}
	}
</script>

<style>
	.picker .flex image{
		width: 40rpx;
		height: 40rpx;
	}
.popup-mask {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100vh;
	  background-color: rgba(0, 0, 0, 0.5);
	  z-index: 999;
	}
	.popup-wrapper {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  z-index: 1111;

	  
	}
	.popup-container {
	  width: 650rpx;
	  background-color: #fff;
	  padding-bottom: 40rpx;
	  border-radius: 34rpx;
	 
	}
	.popup-header {
	  padding: 20rpx;
	  border-bottom: 1rpx solid #ccc;
	  text-align: center;
	  position: relative;
	}
	.popup-title {
	  margin: 0;
	  font-size: 36rpx;
	  font-weight: bold;
	}
	.popup-close {
	  position: absolute;
	  top: 20rpx;
	  right: 30rpx;	  
	}
	.popup-body {
	  padding: 30rpx;
		height: 350rpx;
		text-align: left;
		font-size: 34rpx;
		line-height: 60rpx;
		color: #666;
	}
	.popup-footer {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 18rpx;
	  
	}
	.popup-footer .cu-btn{
		width: 100%;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 50rpx;
		line-height: 35px;
		height: 35px;
		color: white;
		background-color: #378CFF;
	}
	
	.popup-cancel,
	.popup-confirm {
	  padding: 0 60rpx;
	  font-size: 16rpx;
	  color: #fff;
	  border-radius: 4rpx;
	  cursor: pointer;
	}
	.popup-cancel {
	  background-color: #999;
	  margin-right: 10rpx;
	}
	.popup-confirm {
	  background-color: #409EFF;
	}
</style>